<script setup>
import { getData } from '@/api'
import { reactive, ref, nextTick ,watch } from 'vue'
const props = defineProps( ['filmId', 'date', 'cinemaId'])
// 当前电影当日详情
const filmDetails = ref([])
watch(props,()=>{
  if(props.date){
    getData( props ,'schedule.list').then(res=>{
      filmDetails.value = res.data.data?.schedules
    })
  }
})
</script>

<template>
  <footer>
    <div v-for="item in filmDetails">
      <section>
        <p>{{new Date(item.showAt*1000).toLocaleString().slice(10,15) }}</p>
        <span>{{new Date(item.endAt*1000).toLocaleString().slice(10,15)}}散场</span>
      </section>
      <section>
        <p>{{ item.filmLanguage }}{{ item.imagery }}</p>
        <span>{{ item.hallName }}</span>
      </section>
      <b>￥{{ item.salePrice/100 }}</b>
      <button v-html="item.isOnsell? '购票':'停售'"></button>
    </div>
  </footer>
</template>

<style lang="scss" scoped>
footer{
  div{
    display: flex;
    height: .74rem;
    align-items: center;
    padding: .1rem .15rem 0 ;
    justify-content: space-between;
    & section:first-child{
      width: .84rem;
    }
    & section:nth-child(2){
      margin-left: -.1rem;
    }
    section{
      width: 1.35rem;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      p{
        font-size: .15rem;
        margin-bottom:.03rem;
        color: #191a1b;
      }
      span{
        display: block;
        font-size: .13rem;
        color: #797d82;
        margin-top: 2px;
        text-wrap: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    b{
      color: #ff5f16;
      font: normal 400 .15rem/.25rem '';
    }
    button{
      width: .5rem;
      height: .25rem;
      color: #ff5f16;
      background-color: white;
      font: normal 400 .15rem/.25rem '';
      border: 1px solid #ff5f16;
    }
    b,button{
      font-family: "楷体";
    }
  }
  & div:not(:last-child){
    border-bottom:  1px solid rgba(150,150,150,.1);
  }
}
</style>
